.SearchBox{
    width:100%;
    height:50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    float:left;
}
.AddUserButton{
    margin-left: 10%;
    margin-right: 5%;
    width:35px;
    height:35px;
    border-radius: 50%;
    background-color: rgb(237, 158, 158);
    justify-content: center;
    display: flex;
    transition: 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color:aliceblue;
}
.AddUserButton:hover{
    background-color: rgb(232, 121, 121);
    width:37px;
    height:37px;
}
.AddUserButton img{
    margin:auto;
    width:15px;
    height:15px;
    transition: 0.5s;
}
.AddUserButton:hover img{
    width:20px;
    height:20px;
}
.SearchBar{
    margin-right: 5%;
    width: 30%;
    height: 35px;
    background-color: gainsboro;
    border: none;
    display: flex;
    justify-content: center;
    border-radius: 50px ;
    transition: 0.3s;
}
.SearchBar input{
    width:90%;
    color: rgb(62, 62, 62);
    line-height: 30px;
    border: none;
    font-size: 15px;
    font-weight: 450;
    border: 0;  
    outline: none; 
    background-color: rgba(0, 0, 0, 0);
}
.SearchBar:hover{
  width:33%;
  background-color: rgb(179, 177, 177);
}
.SearchButton{
    width:35px;
    height:35px;
    border-radius: 50%;
    background-color: rgb(7, 7, 7);
    justify-content: center;
    display: flex;
    transition: 0.3s ease-in-out;
}
.SearchButton:hover{
    background-color: rgb(77, 77, 77);
    width:37px;
    height:37px;
}
.SearchButton img{
    margin:auto;
    width:15px;
    height:15px;
    transition: 0.5s;
}
.SearchButton:hover img{
    width:20px;
    height:20px;
}
.ListBox{
    width:100%;
    height:400px;
    display: flex;
    flex-direction: row;
}
.LR_List{
    width:35%;
    height:100%;
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.ListItems{
    width:100%;
    height:120px;
    background-color: rgb(225, 225, 225);
    border-radius: 60px 60px /120px ;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    transition: 0.5s ease-in-out;
}
.ListItems:hover{
    box-shadow: 2px 1px 3px black;
}
.ListItems_Dot{
    width:10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: 900;
}
.ListItems_SimpleMassage{
    margin-top: 20px;
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    float: left;
    align-content: center;
    height:100%;
    width:30%;
    justify-content: center;
}
.ListItems_SimpleMassage_Message{
    margin-left: 20px;
    font-size: 15px;
    font-weight: 550;
    height:50%;
    color:black;
    display: flex;
    align-items: center;
}
.ListItems_conf{
    width:15%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ListItems_conf img{
    margin-top: 6.5%;
    width:50px;
    height:50px;
}
.ListItems_ButtonBox{
    margin-left: 5%;
    width:20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}
.ListItems_ButtonBox_Button{
    width:25px;
    margin: auto;
    height:25px;
    transition: 0.3s ease-in-out;
    background-color: rgb(48, 30, 30);
    border-radius: 50%;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    color:aliceblue;
}
.ListItems_ButtonBox_Button:hover{
    width:35px;
    height:35px;
    background-color: rgb(79, 34, 34);
    font-size: 18px;
    
}
.ListItems_ButtonBox_Button2{
    width:25px;
    margin: auto;
    height:25px;
    transition: 0.3s ease-in-out;
    background-color: rgb(8, 8, 8);
    border-radius: 50%;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    color:aliceblue;
}
.ListItems_ButtonBox_Button2:hover{
    width:35px;
    height:35px;
    background-color: rgb(59, 59, 59);
    font-size: 18px;
    
}


.DialogBox{
    width: 800px;;
    height: 500px;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
    box-shadow: 2px 2px 2px 2px rgb(119, 118, 118);
    background-color: #f5f5f5;
}

.DialogBox .el-dialog__title {
    font-size:25px; 
  }

.DetailbodyBox{
    height:350px;
    width:100%;
    display: flex;
    flex-direction: row;
    margin-top: -50px;
}
.DetailbodyBox2{
    height:100%;
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.DetailinfoBox{
    height: 50px;
    width:100%;
}
.DetailinfoBox div{
    margin-left: 100px;
    float:left;
    height: 50px;
    color: #070707;
    font-size: 18px;
    font-weight: 550;
    line-height: 50px;
}
.inputText{
    width: 70%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    padding-left: 30px;
    border-radius: 50px;
    background-color: gainsboro;
    border: none;
    
}
.inputText:focus{
    outline: none;
    background-color: rgb(218, 230, 234);
}
.button_Class2{
    background-color:#000000;
    color:white;
    font-weight: 550;
    width: 20%;
    height: 40px;
    border:0;
    font-size: 18px;
    box-sizing: content-box;				
    border-radius: 50px;
    transition: 0.4s;
    margin-left: 200px;
    text-align: center;
}
.button_Class2:hover{
    background-color: #679eaa7c;
    width: 25%;
    height: 45px;
}
.button_Class3{
    background-color:rgb(38, 149, 104);
    color:white;
    font-weight: 550;
    width: 20%;
    height: 40px;
    border:0;
    font-size: 18px;
    box-sizing: content-box;				
    border-radius: 50px;
    transition: 0.4s;
    margin-left: 100px;
    text-align: center;
}
.button_Class3:hover{
    background-color:  #679eaa7c;
    width: 25%;
    height: 45px;
}
